<template>
  <ElSelect v-model="selectedValue" filterable clearable :="$attrs" placeholder="">
    <ElOption v-for="item in options" :key="item.userId" :label="item.flowerName" :value="item.flowerName"/>
  </ElSelect>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import {ElSelect, ElOption} from 'element-plus'
import {getkefuList} from '../api'

interface Props {
  modelValue: string | null;
  data: any;
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: string | null): void
}>()

const selectedValue = ref(props.modelValue)
const options = ref<Array<{ flowerName: string, userId: number }>>([])

// 监听 modelValue 外部变化
watch(() => props.modelValue, (newVal) => {
  selectedValue.value = newVal
})

// 监听 selectedValue 内部变化并同步到父组件
watch(selectedValue, (newVal) => {
  emit('update:modelValue', newVal)
})

const getOptions = () => {
  const companyName = props.data.zrrqyName;
  if (companyName != null && companyName != '') {
    getkefuList({companyName: companyName, postName: '客服'})
        .then(res => {
          options.value = res
          console.log(res)
        })
  }

}

watch(() => props.data.zrrqyName, () => {
  console.log(props.data.zrrqyName)
  selectedValue.value = null
  emit('update:modelValue', null)
  getOptions()
}, {deep: true})

getOptions()
</script>